Новый более удобный синтаксис медиа запросов css @media - Web-Global: Связывая миры через веб-технологии
Web-Global

Новый более удобный синтаксис медиа запросов css @media

Пост опубликован 26 сентября 2024 в 17:54 и находится в рубриках HTML&CSS. 30
Поделиться:

Новый синтаксис медиа-запросов в CSS, который включает такие выражения, как @media (100px <= width <= 200px), является частью спецификации CSS Media Queries Level 4 и Level 5. Этот синтаксис упрощает работу с диапазонами значений и делает медиа-запросы более читаемыми и интуитивными по сравнению с традиционным способом.

Как это работает:

  1. Старый синтаксис для диапазонов: Ранее для указания диапазона, например, от 100px до 200px ширины, нужно было писать так:
@media (min-width: 100px) and (max-width: 200px) {
  /* стили */
}

2. Новый синтаксис позволяет указать диапазон в одном выражении:

@media (100px <= width <= 200px) {
  /* стили */
}


Это гораздо проще и понятнее, особенно для тех, кто знаком с математическими операциями с неравенствами.

Основные особенности:
Можно использовать для любых медиа-выражений, которые поддерживают числовые значения, например, width, height, aspect-ratio и т.д.
Поддерживаются не только выражения диапазонов (например, 100px <= width <= 200px), но и другие операторы сравнения:
width > 100px
width <= 800px
Пример:

@media (300px <= width <= 600px) {
  body {
    background-color: lightblue;
  }
}

В этом случае, если ширина экрана находится в диапазоне от 300px до 600px, будет применён светло-голубой фон для элемента body.

Поддержка браузерами:

Хотя этот синтаксис действительно намного удобнее, он пока не повсеместно поддерживается всеми браузерами. Некоторые браузеры уже начали внедрение этого функционала, но стоит проверить совместимость для вашего конкретного проекта.

Для обеспечения кроссбраузерности рекомендуется пока использовать старый синтаксис min-width и max-width в продакшн-коде, а новый синтаксис применять там, где это возможно или для экспериментов в будущем.